<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Lightly-HTML-Project</title>
    <style type="text/css">
    //209020347罗宋波
			body {
				font-size: 13px;
				line-height: 25px;
			}
			
			table {
				border-top: 1px solid #333;
				border-left: 1px solid #333;
				width: 300px;
			}
			
			td {
				border-right: 1px solid #333;
				border-bottom: 1px solid #333;
			}
			.center {
				text-align: center;
			}
		</style>
		</head>
	
		<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

      <script>
function addRow() {
  $('#myTable').append('<tr><td>e</td><td>f</td></tr>');
}

function delRow() {
  $('#myTable tr:nth-child(2)').remove();
}

function updateRow() {
  $('#row1').css({ color: 'red', fontSize: '24px' });
}

function copyRow() {
  const lastRow = $('#myTable tr:last').clone();
  $('#myTable').append(lastRow);
}
</script>
	  <body>
		<table border="0" cellspacing="0" cellpadding="0" id="myTable">
			<tr id="row1">
				<td>书名</td>
				<td>价格</td>
			</tr>
			<tr id="row2">
				<td>看得见风景的房间</td>
				<td class="center">&yen;30.00</td>
			</tr>
			<tr id="row3">
				<td>60个瞬间</td>
				<td class="center">&yen;32.00</td>
			</tr>
		</table>
		<input name="b1" type="button" value="增加一行" onclick="addRow()" />
		<input name="b2" type="button" value="删除第2行" onclick="delRow()" />
		<input name="b3" type="button" value="修改标题样式" onclick="updateRow()" />
		<input name="b4" type="button" value="复制最后一行" onclick="copyRow()" />
  </body>
</html>
